<template>
    <div class="pagination">
        <el-pagination
            @size-change="handleChangeSize"
            @current-change="hanleChangeCurrentPage"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            :total="total"
            layout="total, prev, sizes, pager, next, jumper"
            background
        ></el-pagination>
    </div>
</template>
<script>
export default {
    name: 'Pagination',
    data() {
        return {
            pageSizes: [5, 10, 15, 20, 30, 40, 50],
        };
    },
    props: {
        // 页码切换方法
        hanleChangeCurrentPage: {
            required: true,
            type: Function,
        },
        // 切换分页大小方法
        handleChangeSize: {
            required: true,
            type: Function,
        },
        // 当前页码
        currentPage: {
            type: Number,
            default: 1,
        },
        // 页码大小
        pageSize: {
            type: Number,
            default: 1,
        },
        // 总数
        total: {
            type: Number,
            default: 0,
        },
    },
};
</script>
<style lang="scss">
.pagination {
    margin: 30px 0;
    text-align: right;
}
</style>
